<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
  <input type="text" name="" value="" id="accountid" placeholder="请输入id">
    <input type="button" value="查询" onclick="selectAccount()" ><br>
  账户名字:<input type="text" name="" id="accountname"><br>
  真实名字:<input type="text" name="" id="accountrealname"><br>
  账户电话:<input type="text" name="" id="accountphone"><br>
  账户生日:<input type="text" name="" id="accountbirthday"><br>
  角色名字:<input type="text" name="" id="rolename"><br>
</form>
</body>
<script>
    var xmlHttpRequest;
    function selectAccount(){
        xmlHttpRequest = new XMLHttpRequest();
        // 获取填写id
        var accountid = document.getElementById("accountid").value;
        // 发送的路径
        var url = "AccountServlet?flag=selectAccount&accountId="+accountid;
        // 调用open方法发送  get表示请求的方式  url地址  true表示是异步
        xmlHttpRequest.open("GET",url,true);
        xmlHttpRequest.onreadystatechange=callback;
        xmlHttpRequest.send(null);
    }
    function callback() {
        // 请求已完成，且响应已就绪  响应正常
        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
            // 接收到json格式的字符串  然后转换成对象
            console.log(xmlHttpRequest.responseText);
            var str = xmlHttpRequest.responseText;
            var json = JSON.parse(str);
            console.log(json);
            document.getElementById("accountname").value=json.accountName;
            document.getElementById("accountrealname").value=json.accountRealName;
            document.getElementById("accountphone").value=json.accountPhone;
            document.getElementById("accountbirthday").value=json.accountBirthday;
            document.getElementById("rolename").value=json.role.roleName;
        }
    }
</script>
</html>